<template>
    <div>{{msg}}</div>
    <div class="mui-content carTypeList">
        <ul class="mui-table-view carTypeName mgb1">
            <li class="mui-table-view-cell">
                <img class="carTypeLogo" v-bind:src="cbImg">
                <span class="carTypeText color1">{{cbName}}</span>
            </li>
        </ul>
		<template v-for="(cb,model) in models">
        <div class="slwy-panel">
            <div class="panel-content">
                <div class="panel-title">{{cb}}</div>
                <ul class="mui-table-view">
                    <li v-for="(cm,md) in model" class="mui-table-view-cell">
                        <a class="mui-navigate-right color2 text3-size" @click="selectModel(cb,cm)">{{cm}}</a>
                    </li>
                </ul>
            </div>
        </div>
        </template>
        <div class="car-type-list-panel" v-if="isFade" id="left-list" transition="slideFromRight">
            <ul class="mui-table-view">
                <li v-for="(index,item) in carModelDetail" class="mui-table-view-cell" track-by="$index">
                    <a class="mui-navigate-right color2 text3-size" @click="push(item)">{{item}}</a>
                </li>
            </ul>
        </div>
    </div>
</template>

<style type="text/css">
    .carTypeList .carTypeName .carTypeLogo{display: inline-block; width: 0.7rem; height: 0.7rem; background-repeat: no-repeat; background-size: 100%; vertical-align: middle;}
    .carTypeList .carTypeName .carTypeText{font-size: 0.45rem; vertical-align: middle;}
    .car-type-list-panel{width:70%;position:absolute;background-color:#fff;top:0;right:0;bottom:0;margin-top: 45px; overflow: auto;z-index: 1000;}
    .slideFromRight-transition{transition:all .3s ease;opacity:1;transform:translateX(0);}
	.slideFromRight-enter{opacity:0;transform:translateX(100%);}
	.slideFromRight-leave{opacity:0;transform:translateX(100%);}
    .mt-mask{width:100%;height:100%;background:rgba(0,0,0,.3);position:fixed;top:0;right:0;bottom:0;left:0;z-index:100;}
</style>
<script type="text/ecmascript-6">
    import '../../fonts/mui.css';
    import Page from '../../base/Page'
    import { API } from '../../config/constants'
    export default new Page({
    	vuex:{
			actions:{
				updMyCar:function({dispatch},data){
					dispatch('UPD_MY_CAR',data);
				},
				updOrderCar:function({dispatch},data){
                    dispatch('UPD_ORDER_CAR',data);
                }
			},
			getters:{
				carPlateNumber:function(state){
					return state.mycar.carPlateNumber;
				},
				carBrand:function(state){
					return state.mycar.carBrand;
				},
				carModel:function(state){
                    return state.mycar.carModel;
                },
                carModeldetail:function(state){
                    return state.mycar.carModeldetail;
                },
				carBuyPrice:function(state){
					return state.mycar.carBuyPrice;
				},
				carBuyDate:function(state){
					return state.mycar.carBuyDate;
				},
				carBrandImage:function(state){
					return state.mycar.carBrandImage;
				},
				carPlateNumber2:function(state){
                    return state.order.car.carPlateNumber;
                },
                carBrand2:function(state){
                    return state.order.car.carBrand;
                },
                carModel2:function(state){
                    return state.mycar.carModel;
                },
                carBuyPrice2:function(state){
                    return state.order.car.carBuyPrice;
                },
                carBuyDate2:function(state){
                    return state.order.car.carBuyDate;
                },
                carBrandImage2:function(state){
                    return state.order.car.carBrandImage;
                }
			}
		},
        data(){
            return{
            	car:{carBrandImage:'',carPlateNumber:'',carBrand:'',carModel:'',carModeldetail:'',carBuyPrice:'',carBuyDate:''},
            	cbName:'',
            	cbImg:'',
            	models:{},
            	fromPage:'',
                isFade:false,
                carModelDetail:[],
                mask:''
            }
        },
        ready () {
    		this.getJSON(API.GET_CARBRAND_MODE, {cbId:this.$route.params.cbId}, res => {
    			this.cbName = res.resultData.cbName;
    			this.cbImg = res.resultData.cbImg;
        		this.models = res.resultData.models;
                this.modelDetail=res.resultData.modelDetail;
                console.log(this.models);
            });
            mui.init();
            // mui('.mui-off-canvas-wrap').offCanvas('show');
            //get page from tag
            this.fromPage = this.$route.params.from;

            //check page from tag ,init data
            if ('ucenter' == this.fromPage) {
                this.car.carPlateNumber = this.carPlateNumber;
                this.car.carBrand = this.carBrand;
                this.car.carModel = this.carModel;
                this.car.carBuyPrice = this.carBuyPrice;
                this.car.carBuyDate = this.carBuyDate;
                this.car.carBrandImage = this.carBrandImage;
                this.car.carModeldetail = this.carModeldetail;
            } else {
                this.car.carPlateNumber = this.carPlateNumber2;
                this.car.carBrand = this.carBrand2;
                this.car.carModel = this.carModel2;
                this.car.carBuyPrice = this.carBuyPrice2;
                this.car.carBuyDate = this.carBuyDate2;
                this.car.carBrandImage = this.carBrandImage2;
                this.car.carModeldetail = this.carModeldetail2;
            }

        },
        components:{
        },
        methods: {
        	selectModel:function (brand,model) {
        		let that = this;
                that.isFade = !that.isFade;
                
                var mask = that.createMask(
                    function(){
                        that.isFade = !that.isFade;
                    }
                );
                that.mask = mask;
                let allCars = that.models;
                let carBrands = {};
                let carModels = undefined;
                for(let i in allCars){
                    if(i==brand){
                        carBrands = allCars[i];
                    }
                }
                for(let i in carBrands){
                    if(i == model){
                        carModels = carBrands[i];
                    }
                };
                that.carModelDetail = [];
                carModels.forEach(function(item){
                    that.carModelDetail.push(item);
                });
                var oBody = document.getElementsByTagName("body")[0];
                 oBody.style.height = window.innerHeight+'px';
                 oBody.style.overflow = 'hidden';

                if ('ucenterCar' == that.fromPage) {
                    //from ucenter
                    that.car.carBrand = this.cbName;
                    that.car.carModel = model;
                    that.car.carBrandImage = that.cbImg;
                    that.car.carModeldetail  = that.carModelDetail;
                    that.updMyCar(that.car);
                    that.mask.remove();
                } else {
                    //from order
                    that.car.carBrand = this.cbName;
                    that.car.carModel = model;
                    that.car.carBrandImage = that.cbImg;
                    that.car.carModeldetail  = that.carModelDetail;
                    that.updOrderCar(that.car);
                    that.mask.remove();
                }
        	},
            push:function(item){
                let that = this;
                if ('ucenter' == that.fromPage) {
                    //from ucenter
                    that.car.carModeldetail = item;
                    that.car.carModel = that.car.carBrand+' '+ that.car.carModel+' '+ that.car.carModeldetail;
                    that.updMyCar(that.car);
                    that.$route.router.go('/ucenter/car/ucenter');
                    that.mask.remove();
                } else if('BY' == that.fromPage){
                    //form BY
                    that.car.carModeldetail = item;
                    that.car.carModel = that.car.carBrand+' '+ that.car.carModel+' '+ that.car.carModeldetail;
                    that.updMyCar(that.car);
                    that.$route.router.go('/ucenter/car/BY');
                    that.mask.remove();
                }else if('KQLX' == that.fromPage){
                    //from KQLX
                    that.car.carModeldetail = item;
                    that.car.carModel = that.car.carBrand+' '+ that.car.carModel+' '+ that.car.carModeldetail;
                    that.updMyCar(that.car);
                    that.$route.router.go('/ucenter/car/KQLX');
                    that.mask.remove();
                }else if('KTLX' == that.fromPage){
                    //from KTLX
                    that.car.carModeldetail = item;
                    that.car.carModel = that.car.carBrand+' '+ that.car.carModel+' '+ that.car.carModeldetail;
                    that.updMyCar(that.car);
                    that.$route.router.go('/ucenter/car/KTLX');
                    that.mask.remove();
                }else if('moreItems' == that.fromPage){
                    //from KTLX
                    that.car.carModeldetail = item;
                    that.car.carModel = that.car.carBrand+' '+ that.car.carModel+' '+ that.car.carModeldetail;
                    that.updMyCar(that.car);
                    that.$route.router.go('/ucenter/car/moreItems');
                    that.mask.remove();
                }else{
                    //from order
                    that.car.carModeldetail = item;
                    that.car.carModel = that.car.carBrand+' '+ that.car.carModel+' '+ that.car.carModeldetail;
                    that.updOrderCar(that.car);
                    that.$route.router.go('/ucenter/orders/orderCar');
                    that.mask.remove();
                }
            },
            createMask(callback){
                var ele = document.createElement('div');
                ele.className += 'mt-mask';
                document.body.appendChild(ele);
                ele.addEventListener('tap',function(){
                    mask.remove();
                    callback();
                })
                var mask = [ele];
                mask.remove = function(){
                    var body = document.body;
					ele.parentNode === body && body.removeChild(ele);
                }
                return mask
            }
        }
    });
</script>
